<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="随访记录" name="first">
      <doctor-visit-list
        v-model="add"
        :doctor-list="doctorList"
        :patient="patient"
      />
    </el-tab-pane>
    <el-tab-pane label="新建随访" name="second">
      <add-doctor-visit
        :doctor-list="doctorList"
        :patient="patient"
        @change="submit"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import addDoctorVisit from './addDoctorVisit'
import doctorVisitList from './doctorVisitList'
import { postName } from '@/api/system/user'
import { mapState } from 'vuex'

export default {
  name: 'FollowupVisitPane',
  components: {
    addDoctorVisit,
    doctorVisitList,
  },
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      activeName: 'first',
      doctorList: [],
      add: false,
    }
  },
  computed: {
    ...mapState({
      clinicId: (state) => state.clinic.clinicId,
    }),
  },
  mounted() {
    this.getUserListAll()
  },
  methods: {
    submit() {
      this.activeName = 'first'
      this.add = true
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    async getUserListAll() {
      const { data } = await postName({
        deptId: +this.clinicId,
        postname: '医生',
      })
      this.doctorList = data
    },
  },
}
</script>

<style>
.el-tabs__content {
  overflow: inherit;
}
</style>
